<template>
  <el-card shadow="hover" class="box-card m0Card">
    <el-tabs
      @tab-change="tabChange"
      v-model="activeName"
      class="order-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="Unfulfilled" :name="0">
        <!-- <OrderTableJs
          v-model:activeName.sync="activeName"
          v-if="props.type === 'OrderTableJs'"
        /> -->
        <OrderTable
          v-if="props.type === 'OrderTable'"
          :loading="loading"
          :tableData="tableData.data"
        ></OrderTable>
        <OrderTableVex
          v-if="props.type === 'OrderTableVex'"
          :tableData="tableData.data"
        />
        <OrderTable
          v-if="props.type === 'OrderTable'"
          :tableData="tableData.data"
        />
      </el-tab-pane>
      <el-tab-pane label="Awaiting confirm" :name="1"> confirm</el-tab-pane>
      <el-tab-pane label="Fulfilled" name="2">Fulfilled</el-tab-pane>
      <el-tab-pane label="Processing" name="3">Processing</el-tab-pane>
      <el-tab-pane label="Dispute" name="4">Dispute</el-tab-pane>
      <el-tab-pane label="Refunded" name="5"> Refunded</el-tab-pane>
      <el-tab-pane label="Abandoned" name="6">Abandoned</el-tab-pane>
    </el-tabs>
  </el-card>

  <!-- 分页 -->
  <!-- <div
    v-show="
      tableData.data.length === tableData.pageSize ||
      tableData.currentPage === Math.ceil(daraLenth / tableData.pageSize)
    "
  > -->
  <OrderPaging
    v-if="props.type !== 'OrderTableJs'"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    :tableData="tableData"
  />
  <!-- </div> -->
  <el-affix position="bottom" :offset="50">
    <el-card class="box-card m-t20 ac" shadow="hover">
      <el-row class="mb-4 ac">
        <el-checkbox
          v-model="checked1"
          label="44 itens selected"
          size="large"
        />
        <div class="acTotal">Total: <span class="span">0.00 USD</span></div>
      </el-row>

      <el-row class="mb-4 at">
        <router-link to="/Order/ScaleOrder/PlaceAnOrder">
          <el-button type="default"> Place an order </el-button>
        </router-link>
        <router-link to="/Order/ScaleOrder/PaymentOrder">
          <el-button type="danger">Place all orders</el-button>
        </router-link>
      </el-row>
    </el-card>
  </el-affix>
</template>

<script lang="ts" setup>
import OrderTableJs from "@/components/OrderTableJs/index.vue";
import OrderPaging from "@/components/OrderTable/orderPaging.vue";
// import ScaleOrderCopy from "@/views/Order/ScaleOrderCopy/index.vue";
// import ScaleOrderCopy2 from "@/views/Order/ScaleOrderCopy/index2.vue";
import json from "../../mock/json.json";
import OrderTableVex from "./orderTableVex.vue";
import OrderTable from "./orderTable.vue";

import _ from "lodash";

import { reactive, ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";

const props = defineProps(["type"]);

const loading = ref(false);
const currentTable = ref([]); //当前分页数据
const activeName = ref(0);
const checked1 = ref(true);
const daraLenth = ref(0);

const tableData = reactive({
  data: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

const tabChange = (e) => {
  tableData.pageSize = 10;
  console.log(e);
  activeName.value === e;
};

// 获取静态数据数据渲染测试
let tableDataArr = json.data.orders;

//处理数据格式转换数组
const fiterArr = (data: any) => {
  let tableDataArrNew = [];
  for (var i in data) {
    tableDataArrNew.push(...data[i]); //es6的扩展运算符（...）它主要是将一个数组转为用逗号分隔的参数序列
  }
  let n = 1;
  tableDataArrNew.forEach((e) => {
    e.index = n++;
    e.children = [
      {
        index1: 21,
      },
    ];
  });

  daraLenth.value = tableDataArrNew.length;
  return tableDataArrNew;
};

// 初始化表格数据
const initTable = async () => {
  let res = await fiterArr(tableDataArr); //加上异步
  // 不存在 data 没有数据 中断代码执行
  if (!res) return false;

  // 赋值总条数给 total
  tableData.total = res.length;

  // 分页逻辑在这里体现
  let start =
    tableData.currentPage > 1
      ? (tableData.currentPage - 1) * tableData.pageSize
      : 0;
  let end = tableData.currentPage * tableData.pageSize;

  // 如果分页大于50
  currentTable.value = res.slice(start, end) as any;
  if (tableData.pageSize > 50) {
    tableData.data = res.slice(start, start + 50) as any;
    // scroll();
  } else {
    tableData.data = res.slice(start, end) as any;
  }
};

const tableDataSlice = (res: any) => {
  let lengthStr = tableData.data.length;
  let lengthEnd = tableData.data.length + 50;
  // 每次增加的条数
  let addArr = res.slice(lengthStr, lengthEnd);
  console.log(lengthStr, lengthEnd);

  tableData.data = [...tableData.data, ...addArr];
};

const scroll = () => {
  const wrapper = document.getElementsByClassName("main")[0];
  wrapper.addEventListener("scroll", _.throttle(handleScroll, 100));
};
const handleScroll = () => {
  const wrapper = document.getElementsByClassName("main")[0];

  let t = wrapper.scrollTop;
  let h = wrapper.clientHeight;
  let v = wrapper.scrollHeight;
  if (t + h >= v - 400) {
    //滚动条到达底部
    if (tableData.data.length < tableData.pageSize) {
      console.log("滚动条到达底部");
      //数据为加载完，继续赋值
      tableDataSlice(currentTable.value);
      //  _.throttle(this.getUserList(),2000);
    }
  }
};
onMounted(() => {
  scroll();
});

initTable();
console.log(tableData);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  tableData.pageSize = val;
  initTable();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  tableData.currentPage = val;
  initTable();
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.m0Card {
  margin-bottom: 50px;
}

::v-deep.ac .el-card__body {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
}
.at a {
  margin-right: 10px;
}
.order-tabs ::v-deep .el-tabs__nav-scroll {
  padding: 0 20px;
}
.acTotal {
  margin-left: 10px;
  .span {
    color: #bc1f22;
  }
}
</style>
